<template>
    <div>
         <table cellspacing="0" cellpadding="0">
            <thead :class="{title:titles}">
                <tr>
                    <th>{{id}}</th>
                    <th>{{name}}</th>
                    <th>{{price}}</th>
                    <th>{{sum}}</th>
                    <th>{{operation}}</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr ref="tr" v-for='(item,index) in goods' :class="{active:currentIndex === index}" @click="liClick(index)" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>￥{{item.price| showPrice}}</td>
                    <td>
                        <button class="btn" @click="adds(index)" :disabled="item.sum<=1">-</button>{{item.sum}}<button class="btn" @click="add(index)">+</button>
                    </td>
                    <td><button @click='del(index)'>删除</button></td>
                    <!-- del()中传入一个参数，为index -->
                </tr>
            </tbody>
        </table>
        <p :class="{text: text1}">{{text}}</p>
        <p>商品总价￥{{toprice.toFixed(2)}}</p>
    </div>
</template>

<script>
export default {
    name:'shopping',
    data(){
        return{
               id: "序号",
                    name: "名称",
                    price: "价格",
                    sum: "数量",
                    operation: "操作",
                    currentIndex: -1,
                    text: "购物车已经清空",
                    text1: true,
                    titles: false,

                    goods: [{
                        id: 100,
                        name: "剃须刀",
                        price: 199,
                        sum: 8
                    }, {
                        id: 101,
                        name: "保温杯",
                        price: 17.5,
                        sum: 10
                    }, {
                        id: 103,
                        name: "拖把",
                        price: 12.8,
                        sum: 2
                    }, {
                        id: 104,
                        name: "砧板",
                        price: 29.9,
                        sum: 15
                    }, {
                        id: 105,
                        name: "水桶",
                        price: 15,
                        sum: 29
                    }, {
                        id: 106,
                        name: "衣架",
                        price: 8,
                        sum: 9
                    }],
        }
    },
      //过滤器
            filters: {
                showPrice(price) {
                    return parseFloat(price).toFixed(2)
                }
            },

            methods: {
                liClick(index) {

                    this.currentIndex = index;
                },
                del(index) {
                    //this.goods.splice(index, 1)
                    if (this.goods.length > 0) {
                        // this.goods.splice(this.$refs.tr[index], 1);
                        // console.log(this.$refs.tr[index]);
                        this.$refs.tr[index].class = "";
                        this.goods.splice(index, 1);
                        // console.log("-----------------" + this.goods.length);
                        if (this.goods.length == 0) {
                            this.text1 = false;
                            this.titles = true;
                        }
                    }
                    //将所有的tr的class清空,

                },
                add(index) {
                    this.goods[index].sum++
                },
                adds(index) {
                    // this.goods[index].sum--
                    if (this.goods[index].sum != 1) {
                        this.goods[index].sum--
                    }
                }
            },
            computed: {
                // cdd: function() {
                //     var result = 0;
                //     for (var i = 0; i < this.goods.length; i++) {
                //         result += this.goods[i].price;
                //     }
                //     return parseFloat(result).toFixed(2)
                // },

                toprice() {
                    return this.goods.reduce((preValue, item) => { //reduce高阶函数进行统计 reduce
                        return preValue + item.price
                    }, 0)
                }
            },
}
</script>

<style scoped>
 table {
    width: 600px;
    text-align: center;
}

 table thead th {
    height: 50px;
}

 table td {
    border: 1px solid black;
    height: 50px;
}

.btn {
    margin: 10px;
    width: 20px;
    line-height: normal;
}

.active {
    background-color: dodgerblue;
}

.text {
    font-size: 0px;
    font-weight: bold;
    text-align: center;
}

.title {
    display: none;
}
</style>